/**
 * @function xlib-js
 * @encode utf-8
 * @copyright (C) lijun
 * @file ui.js
 * @author lijun
 * @version 1.0
 * @date 2009-12-12
 */
XLib.UI = {
    PREFIX : "XLIB_UI_",
    RESOUCE_ROOT : "",
    CACHE_TIME : 0,
    SECURE_PAGE : UA.Browser.ie > 0 ? "javascript:''" : "about:blank", //动态IFRAME时用的安全页
    ICON : {
        OK : 1,
        INFO : 2,
        PROMPT : 3,
        WARN : 4,
        ERROR : 5,
        NONE : -1
    },
    /**
     * 显示对象
     * @param id
     * @param width
     * @param height
     */
    show : function(id, width, height)
    {
        var win = XLib.DOM.$E(XLib.UI.PREFIX + id);
        if(null != win)
        {
            this.mask(id);
            var viewport = XLib.BOM.getViewportSize();
            var scroll = XLib.BOM.getScrollPosition();
            var offsetLeft = width ? viewport.width / 2 - width / 2 : 0;
            var offsetTop = height ? viewport.height / 2 - height / 2 + scroll.top : 0;
            win.style.left = offsetLeft + "px";
            win.style.top = offsetTop + "px";
            win.style.display = "block";
            this.show_ctrl(false);
        }
        win = null;
    },
    /**
     * 隐藏对象
     * @param id
     */
    hidden : function(id)
    {
        var win = XLib.DOM.$E(XLib.UI.PREFIX + id);
        var m = XLib.DOM.$E(XLib.UI.PREFIX + "mask_" + id);
        if(null != win)
        {
            win.style.display = "none";
        }
        if(null != m)
        {
            m.style.display = "none";
        }
        this.show_ctrl(true);
        win = null;
        m = null;
    },
    /**
     * 显示/隐藏select和object元素
     * @param isShow true/false
     */
    show_ctrl : function(isShow)
    {
        var sel = XLib.DOM.$T("select");
        var obj = XLib.DOM.$T("object");
        var selSize = sel.length;
        var objSize = obj.length;
        for(var i = 0; i < selSize; i++)
        {
            sel[i].style.visibility = isShow ? "visible" : "hidden";
        }
        for(var j = 0; j < objSize; j++)
        {
            obj[j].style.visibility =  isShow ? "visible" : "hidden";
        }
        sel = null; obj = null;
    },
    /**
     * 遮罩层
     * @param id
     */
    mask : function(id)
    {
        var viewport = XLib.BOM.getViewportSize();
        var scroll = XLib.BOM.getScrollPosition();
        var m = XLib.DOM.$E(XLib.UI.PREFIX + "mask_" + id);
        var ifr = XLib.DOM.$E(XLib.UI.PREFIX + "mask_ifr_" + id);
        var w = (viewport.width + scroll.left);
        var h = (viewport.height + scroll.top);
        if(null == m)
        {
            m = XLib.DOM.$C("div");
            m.setAttribute("id", XLib.UI.PREFIX + "mask_" + id);
            m.style.cssText = "background-color:#fff; filter:Alpha(opacity=65);-moz-opacity:0.65; opacity:0.65; position:absolute; left:0px; top:0px; z-index:7999;";
            m.innerHTML = '<iframe name="' + XLib.UI.PREFIX + "mask_ifr_" + id +'" id="' + XLib.UI.PREFIX + "mask_ifr_" + id + '" src="'+ XLib.UI.SECURE_PAGE +'" marginwidth="0" marginheight="0" vspace="0" hspace="0" scrolling="no" frameborder="0" style="position:absolute; left:0px; top:0px; width:' + w + 'px; height:' + h + 'px; z-index:-1;"></iframe>';
            XLib.DOM.$A(m);
            ifr = XLib.DOM.$E(XLib.UI.PREFIX + "mask_ifr_" + id);
        }
        m.style.width = w + "px";
        m.style.height = h + "px";
        ifr.style.width = w + "px";
        ifr.style.height = h + "px";
        m.style.display = "block";
    },
    /**
     * 创建IFRAME
     * @param String _id iframe的id
     * @param String _src 需要加载的地址
     * @param String css 附加样式
     * @return Object ifr iframe对象
     */
    createIframe : function(_id, _src, css)
    {
        var ifr = XLib.DOM.$C("iframe");
        var attrs = {id:_id,name:_id,src:_src,frameBorder:0,marginHeight:0,marginWidth:0,vSpace:0,hSpace:0,scrolling:'no'};
        for(var key in attrs)
        {
            if(attrs.hasOwnProperty(key))
            {
                ifr[key] = attrs[key];
            }
        }
        if(css){ifr.style.cssText = css;}
        return ifr;
    },
    /**
     * 设置资源文件地址
     * @param String path 路径
     * @param Number cacheTime 缓存时间戳
     */
    setResourceRoot : function(path, cacheTime)
    {
        this.RESOUCE_ROOT = (path || "");
        this.CACHE_TIME = (cacheTime || 0)
    }
};
/**
 * 对话框
 */
XLib.UI.Dialog = function()
{
    this.cfg = {
        id : 0,
        title : "提示",
        content : null,
        icon : 0,
        width : 550,
        height : 400,
        drag : true,
        btns : [{label:"关闭", handler:null, args:[], disabled:false}],
        closer : {handler:null, args:[], visible:true}
    };
    this.id = null;
};
XLib.UI.Dialog.prototype = {
    /**
     * 设置对话框参数
     * @param cfg 参数集 id:0;
     *                   title:xxxx;
     *                   icon:0;
     *                   content:xxx;
     *                   btns:[{label, handler, args, disabled}];
     *                   width:0;
     *                   height:0;
     *                   closer:{handler, args, visible}
     */
    set_cfg : function(cfg)
    {
        cfg = cfg || {};
        this.cfg = {};
        this.cfg.id = cfg.id || 0;
        this.cfg.title = cfg.title || "提示";
        this.cfg.content = cfg.content || null;
        this.cfg.icon = cfg.icon || -1;
        this.cfg.width = cfg.width || 340;
        this.cfg.height = cfg.height || 150;
        this.cfg.drag = typeof(cfg.drag) == "boolean" ? cfg.drag : true;
        this.cfg.btns = cfg.btns || null;
        this.cfg.closer = cfg.closer || null;
        this.id = (XLib.UI.PREFIX + cfg.id);
        this.set_dialog_css();
    },
    /**
     * 获取参数集
     * @return cfg
     */
    get_cfg : function()
    {
        return this.cfg;
    },
    /**
     * 显示对话框
     * @param _cfg
     */
    showDialog : function(_cfg)
    {
        this.dialog(_cfg);
        XLib.UI.show(this.get_cfg().id, this.get_cfg().width, this.get_cfg().height);
    },
    /**
     * 隐藏对话框
     */
    hiddenDialog : function()
    {
        XLib.UI.hidden(this.get_cfg().id);
    },
    /**
     * 创建对话框
     * @param _cfg
     */
    dialog : function(_cfg)
    {
        //id:0; title:xxxx; icon:0; text:xxx; btns:[{label, handler, args disabled, size}]; width:0; height:0; closer:
        this.set_cfg(_cfg);
        var cfg = this.get_cfg();
        var win = XLib.DOM.$E(this.id);
        var str = '<h2 id="'+ this.id +'_head" class="xlib-ui-dialog-head">'
            + '<span id="'+ this.id +'_head2" class="xlib-ui-dialog-head2">'
            + '<span id="'+ this.id +'_title" class="xlib-ui-dialog-title"><!--title here--></span>'
            + '<a id="'+ this.id +'_close" class="xlib-ui-dialog-close" href="###" onclick="XLib.UI.hidden(\''+ cfg.id +'\'); return false;" hidefocus="hidefocus">关闭</a>'
            + '</span>'
            + '</h2>'
            + '<div id="'+ this.id +'_outer" class="xlib-ui-dialog-outer">'
            + '<div id="'+ this.id +'_inner" class="xlib-ui-dialog-inner">'
            + '<div id="'+ this.id +'_body" class="xlib-ui-dialog-body">'
            + '<cite id="'+ this.id +'_icon" class="xlib-ui-dialog-icon xlib-ui-dialog-icon1"><!--icon here--></cite>'
            + '<span id="'+ this.id +'_content" class="xlib-ui-dialog-content"><!--content here--></span>'
            + '</div>'
            + '<div id="'+ this.id +'_btn_row" class="xlib-ui-dialog-btn-row">'
            + '<div class="xlib-ui-dialog-line"></div>'
            + '<div id="'+ this.id +'_btns" class="xlib-ui-dialog-btns"></div>'
            + '</div>'
            + '</div>'
            + '</div>'
            + '<div id="'+ this.id +'_bottom" class="xlib-ui-dialog-bottom"><div id="'+ this.id +'_bottom2" class="xlib-ui-dialog-bottom2"></div></div>';
        if(null == win)
        {
            win = XLib.DOM.$C("div");
            win.setAttribute("id", this.id);
            win.className = "xlib-ui-dialog";
            XLib.DOM.$A(win);
        }
        win.innerHTML = str;
        this.set_dialog_title(cfg.title||"提示");
        this.set_dialog_closer(cfg.closer||null);
        this.set_dialog_body(cfg.icon||0, cfg.content||"");
        this.set_dialog_button(cfg.btns||[]);
        this.set_dialog_style(cfg.btns||[], cfg.width||340, cfg.height||150);
        if(true === cfg.drag)
        {
            XLib.Event.addEventListener(this.id + "_head", "mousedown", function(){
                XLib.Drag.drag([win.id]);
            }, [], false);
        }
    },
    /**
     * 设置对话框标题
     * @param title 标题
     */
    set_dialog_title : function(title)
    {
        var o = XLib.DOM.$E(this.id + "_title");
        o.innerHTML = title;
        o = null;
    },
    /**
     * 设置关闭按钮
     * @param closer 对象{handler, args, visible}
     */
    set_dialog_closer : function(closer)
    {
        var o = XLib.DOM.$E(this.id + "_close");
        if(null == closer || (closer && false !== closer["visible"]))
        {
            o.style.display = "block";
            if(closer && closer.handler)
            {
                XLib.Event.addEventListener(o, "click", function(){
                    if(closer.handler){
                        var args = closer.args || [];
                        closer.handler.apply(null, args);
                        XLib.Event.removeEventListener(o, "click", arguments.callee, [], false);
                    }
                }, [], false);
            }
        }
        else
        {
            o.style.display = "none";
        }
    },
    /**
     * 设置内容
     * @param icon 图标
     * @param text 内容
     */
    set_dialog_body : function(icon, content)
    {
        var ob = XLib.DOM.$E(this.id + "_body");
        var oi = XLib.DOM.$E(this.id + "_icon");
        var ot = XLib.DOM.$E(this.id + "_content");
        if(icon > 0)
        {
            XLib.CSS.setClass(oi, "xlib-ui-dialog-icon xlib-ui-dialog-icon" + icon);
            ot.innerHTML = content;
        }
        else
        {
            ob.innerHTML = content;
        }
    },
    /**
     * 设置按钮
     * @param btns 按钮列表 [{label, handler, args, disabled}]
     */
    set_dialog_button : function(btns)
    {
        var or = XLib.DOM.$E(this.id + "_btn_row");
        var ob = XLib.DOM.$E(this.id + "_btns");
        var size = btns.length;
        var sBtn = "";
        var btn = null;
        if(size > 0)
        {
            or.style.display = "block";
            for(var i = size - 1; i >= 0; i--)
            {
                btn = btns[i];
                sBtn += '<span id="'+ this.id +'_btn_' + i + '" class="xlib-ui-dialog-btn' + (true === btn.disabled ? ' xlib-ui-dialog-btn-dis' : '') + '"><code hidefocus="hidefocus">' + btn.label + '</code></span>';
            }
            ob.innerHTML = sBtn;
            this.set_dialog_button_event(btns);
        }
        else
        {
            or.style.display = "none";
            ob.innerHTML = "";
        }
    },
    /**
     * 设置按钮事件
     * @param btns 按钮列表 [{label, handler, args, disabled}]
     */
    set_dialog_button_event : function(btns)
    {
        var size = btns.length;
        var btn = null;
        var o = null;
        for(var i = 0; i < size; i++)
        {
            o = XLib.DOM.$E(this.id +'_btn_' + i);
            btn = btns[i]
            if(null != o && true !== btn.disabled && btn.handler)
            {
                this.set_dialog_btn_click(o, btn);
                this.set_dialog_btn_mouse(o);
            }
        }
    },
    /**
     * 设置按钮点击事件
     * @param o 链接按钮
     * @param btn 按钮对象
     */
    set_dialog_btn_click : function(o, btn)
    {
        XLib.Event.addEventListener(o, "click", function(){
            var args = btn.args || [];
            btn.handler.apply(null, args);
        }, [], false);
    },
    /**
     * 设置鼠标事件
     * @param o 链接按钮
     */
    set_dialog_btn_mouse : function(o)
    {
        var pre = 'xlib-ui-dialog-btn';
        var pre2 = pre + ' xlib-ui-dialog-btn-';
        XLib.Event.addEventListener(o, "mouseover", function(){
            XLib.CSS.setClass(o, pre2 + "hover");
        }, [], false);
        XLib.Event.addEventListener(o, "mouseout", function(){
            XLib.CSS.setClass(o, pre);
        }, [], false);
        XLib.Event.addEventListener(o, "mousedown", function(){
            XLib.CSS.setClass(o, pre2 + "down");
        }, [], false);
    },
    /**
     * 设置对话框样式
     * @param btns 按钮
     * @param width 宽
     * @param height 高
     */
    set_dialog_style : function(btns, width, height)
    {
        var size = btns.length;
        var btnHeight = 26;
        var offset = size > 0 ? 0 : btnHeight;
        var titleHeight = 30;
        var bottomHeight = 2;
        var main = XLib.DOM.$E(this.id);
        var outer = XLib.DOM.$E(this.id + "_outer");
        var inner = XLib.DOM.$E(this.id + "_inner");
        var body = XLib.DOM.$E(this.id + "_body");
        var content = XLib.DOM.$E(this.id + "_content");
        var btnRow = XLib.DOM.$E(this.id + "_btn_row");
        var bottom = XLib.DOM.$E(this.id + "_bottom");
        var bottom2 = XLib.DOM.$E(this.id + "_bottom2");
        var outerWidth = width - 2;
        var outerHeight = height - titleHeight - bottomHeight;
        var innerWidth = outerWidth - 2;
        var innerHeight = outerHeight;
        var bodyHeight = height - titleHeight - btnHeight - bottomHeight + offset;
        var contentWidth = innerWidth - 82;
        main.style.cssText = "width:" + width + "px; min-height:" + height + "px; height:auto !important; _height:" + height + "px;";
        outer.style.cssText = "width:" + outerWidth + "px; min-height:" + outerHeight + "px; height:auto !important; _height:" + outerHeight + "px;";
        inner.style.cssText = "width:" + innerWidth + "px; min-height:" + innerHeight + "px; height:auto !important; _height:" + innerHeight + "px;";
        body.style.cssText = "min-height:" + bodyHeight + "px; height:auto !important; _height:" + bodyHeight + "px;";
        if(content){
            content.style.cssText = "width:" + contentWidth + "px;";
        }
        btnRow.style.cssText = "width:" + innerWidth + "px; display:" + btnRow.style.display + ";";
        bottom.style.cssText = "width:" + outerWidth + "px;";
        bottom2.style.cssText = "width:" + innerWidth + "px;";
    },
    /**
     * 设置对话框样式
     */
    set_dialog_css : function()
    {
        var cssTexts = [
            '.xlib-ui-dialog{width:340px; min-height:150px; height:auto !important; _height:150px; position:absolute; left:100px; top:100px; z-index:8200; font:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif; overflow:hidden; margin:0px; padding:0px; display:none;}',
            '.xlib-ui-dialog-head{display:block; height:30px; line-height:30px; background:url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat 0 0; padding:0 0 0 5px; margin:0px;}',
            '.xlib-ui-dialog-head2{display:block; height:30px; line-height:30px; text-indent:5px; font-size:12px; color:#fff; background:url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat 100% 0; padding:0 5px 0 0; position:relative;}',
            '.xlib-ui-dialog-close{position:absolute; right:0px; top:0px; display:block; width:42px; height:18px; background:url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat -201px -83px; text-indent:-1000px; outline:none; overflow:hidden;}',
            '.xlib-ui-dialog-close:hover{background-position:-201px -103px;}',
            '.xlib-ui-dialog-close:active{background-position:-201px -123px;}',
            '.xlib-ui-dialog-outer{width:338px; min-height:118px; height:auto !important; _height:118px; border-left:1px solid #1D3E7C; border-right:1px solid #1D3E7C; background:#F5F9FC;}',
            '.xlib-ui-dialog-inner{width:336px; min-height:118px; height:auto !important; _height:118px; border-left:1px solid #B1DCEC; border-right:1px solid #B1DCEC;}',
            '.xlib-ui-dialog-body{width:100%; min-height:92px; height:auto !important; _height:92px;}',
            '.xlib-ui-dialog-icon{display:block; width:40px; height:40px; background:url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat 0 -114px; margin:12px 12px 0px 24px; _margin-left:15px; float:left;}',
            '.xlib-ui-dialog-icon1{background-position:0 -114px;}',
            '.xlib-ui-dialog-icon2{background-position:-40px -114px;}',
            '.xlib-ui-dialog-icon3{background-position:-80px -114px;}',
            '.xlib-ui-dialog-icon4{background-position:-120px -114px;}',
            '.xlib-ui-dialog-icon5{background-position:-160px -114px;}',
            '.xlib-ui-dialog-content{display:block; width:254px; float:left; margin-top:18px;}',
            '.xlib-ui-dialog-btn-row{height:26px; width:336px; background:#CED7E9;}',
            '.xlib-ui-dialog-line{width:100%; height:1px; background:#CED7E9; border-bottom:1px solid #fff; overflow:hidden;}',
            '.xlib-ui-dialog-btns{height:24px; line-height:24px; text-align:right;}',
            '.xlib-ui-dialog-btn{display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; height:21px; line-height:21px; background:url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat -520px -34px; padding:0 0 0 15px; float:right; margin:2px 6px 0 0; cursor:pointer;}',
            '.xlib-ui-dialog-btn code{display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; height:21px; line-height:23px; border:none; background:url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') 100% -34px; outline:none; padding:0 14px 0 0; cursor:pointer; overflow:hidden;}',
            '.xlib-ui-dialog-btn-hover{background-position:-520px -56px;}',
            '.xlib-ui-dialog-btn-hover code{background-position:100% -56px;}',
            '.xlib-ui-dialog-btn-down{background-position:-520px -78px;}',
            '.xlib-ui-dialog-btn-down code{background-position:100% -78px;}',
            '.xlib-ui-dialog-btn-focus{background-position:-520px -100px;}',
            '.xlib-ui-dialog-btn-focus code{background-position:100% -100px;}',
            '.xlib-ui-dialog-btn-dis{background-position:-520px -122px;}',
            '.xlib-ui-dialog-btn-dis code{background-position:100% -122px; color:#6A7487; cursor:default;}',
            '.xlib-ui-dialog-bottom{height:2px; width:338px; background:url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat 0 -31px; padding:0 0 0 2px; overflow:hidden;}',
            '.xlib-ui-dialog-bottom2{height:2px; width:336px; background:url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat 100% -31px; padding:0 2px 0 0;}'
        ];
        XLib.CSS.dynamicStyle(cssTexts, "xlib_ui_dialog_css");
    }
};
/**
 * 下拉框构造函数
 * border:#7F9DB9/bgcolor:#316AC5
 */
XLib.UI.JSelect = function()
{
    //attributes
    this.$name = null;
    this.$id = null;
    this.width = 128;
    this.height = 20;
    this.optionHeight = 20;
    this.offsetX = 0;
    this.offsetY = 0;
    this.rows = -1;
    //events
    this.$events = {
        $onchange : null,
        $onclick : null,
        $ondblclick : null,
        $onmouseover : null,
        $onmouseout : null,
        $onmousedown : null,
        $onmousemove : null,
        $onfocus : null,
        $onblur : null,
        $onkeyup : null,
        $onkeydown : null,
        $onkeypress : null
    };
    //------------------------
    this.$selectedIndex = 0;
    this.$value = null;
    this.$text = null;
    this.$defaultSelected = false;
    this.$selected = false;
    this.$disabled = false;
    this.$options = [];
    this.$lastIndex = -1;
    //------------------------
    this.$select = null;
    this.$htmlSelect = null;
    //------------------------
};
XLib.UI.JSelect.prototype = {
    /**
     * 添加事件监听
     */
    addEventHandler : function()
    {
        var events = this.$events;
        if(null != this.$select)
        {
            for(var e in events)
            {
                if(events.hasOwnProperty(e))
                {
                    if(null != events[e])
                    {
                        XLib.Event.addEventListener(this.$select, e.substr(3), events[e], [], false);
                        if("$onchange" == e && UA.Browser.ie > 0)
                        {
                            XLib.Event.addEventListener(this.$select, "propertychange", events[e], [], false);
                        }
                    }
                }
            }
        }
    },
    /**
     * 移除事件监听
     */
    removEventHandler : function()
    {
        var events = this.$events;
        if(null != this.$select)
        {
            for(var e in events)
            {
                if(events.hasOwnProperty(e))
                {
                    if(null != events[e])
                    {
                        XLib.Event.removeEventListener(this.$select, e.substr(3), events[e], false);
                        if("$onchange" == e && UA.Browser.ie > 0)
                        {
                            XLib.Event.removeEventListener(this.$select, "propertychange", events[e], false);
                        }
                    }
                }
            }
        }
    },
    /**
     * 创建select元素
     * @return object sel
     */
    createHTMLSelectElement : function()
    {
        var sel = null;
        if(UA.Browser.ie > 0)
        {
            sel = XLib.DOM.$C('<select name="'+this.$name+'">');
        }
        else
        {
            sel = XLib.DOM.$C("select");
            sel.setAttribute("name", this.$name);
        }
        sel.setAttribute("id", "html_sel_" + this.$id);
        sel.style.cssText = "display:none";
        this.$htmlSelect = sel;
        return sel;
    },
    /**
     * 下拉箭头事件
     */
    arrowMousEvent : function(hover)
    {
        var arrow = XLib.DOM.$E("sel_arrow_" + this.$id);
        if(hover)
        {
            arrow.className = "ria-sel-ahover";
        }
        else
        {
            arrow.className = "";
        }
        arrow = null;
    },
    /**
     * 当前值事件
     */
    curMousEvent : function(isFocus)
    {
        var item = XLib.DOM.$E("sel_cur_" + this.$id);
        if(isFocus)
        {
            item.className = "selected";
        }
        else
        {
            item.className = "";
        }
        item = null;
    },
    /**
     * 创建虚拟的下拉框
     * @return object sel
     */
    createVirtualSelect : function()
    {
        var sel = XLib.DOM.$C("div");
        var item = XLib.DOM.$C("a");
        var arrow = XLib.DOM.$C("code");
        var _this = this;
        sel.setAttribute("id", this.$id);
        sel.className = "xlib-select";
        item.setAttribute("id", "sel_cur_" + this.$id);
        item.setAttribute("href", "javascript:void(0);");
        arrow.setAttribute("id", "sel_arrow_" + this.$id);
        XLib.Event.addEventListener(arrow, "mouseover", function(){_this.arrowMousEvent(true);}, [], false);
        XLib.Event.addEventListener(arrow, "mousedown", function(){_this.arrowMousEvent(true);}, [], false);
        XLib.Event.addEventListener(arrow, "mouseout", function(){_this.arrowMousEvent(false);}, [], false);
        XLib.Event.addEventListener(arrow, "mouseup", function(){_this.arrowMousEvent(false);}, [], false);
        XLib.Event.addEventListener(item, "focus", function(){_this.curMousEvent(true);}, [], false);
        XLib.Event.addEventListener(item, "blur", function(){_this.curMousEvent(false);}, [], false);
        XLib.Event.addEventListener(item, "focusout", function(){_this.curMousEvent(false);}, [], false);
        if(!this.$disabled)
        {
            XLib.Event.addEventListener(sel, "click", function(){_this.showOptions(true);}, [], false);
        }
        XLib.DOM.$A(item, sel);
        XLib.DOM.$A(arrow, sel);
        this.$select = sel;
        return sel;
    },
    /**
     * 创建区域面板
     * @return object panel
     */
    createPanel : function()
    {
        var panel = XLib.DOM.$C("div");
        var optionPanel = XLib.DOM.$C("div");
        var htmlSel = this.createHTMLSelectElement();
        var sel = this.createVirtualSelect();
        panel.setAttribute("id", "sel_panel_" + this.$id);
        optionPanel.setAttribute("id", "sel_optionPanel_" + this.$id);
        panel.className = "xlib-select-panel";
        optionPanel.className = "xlib-select-optionPanel";
        XLib.Event.addEventListener(optionPanel, "mouseup", function(){XLib.Event.preventDefault(); XLib.Event.stopPropagation();}, [], false);
        XLib.DOM.$A(htmlSel, panel);
        XLib.DOM.$A(sel, panel);
        XLib.DOM.$A(optionPanel, panel);
        return panel;
    },
    /**
     * 显示option
     */
    showOptions : function(isShow)
    {
        var o = XLib.DOM.$E("sel_optionPanel_" + this.$id);
        if(null != o && false == this.$disabled)
        {
            var _this = this;
            if(isShow)
            {
                this.setOptionPanelPos();
                o.style.display = "block";
                XLib.Event.addEventListener(document, "mouseup", function(){_this.showOptions(false);}, [], false);
                XLib.UI.show_ctrl(false);
            }
            else
            {
                o.style.display = "none";
                XLib.UI.show_ctrl(true);
            }
        }
        o = null;
    },
    /**
     * 设置事件句柄
     */
    setEventHandler : function(_events)
    {
        var evts = _events || {};
        for(var e in evts)
        {
            if(/^\$on/g.test(e))
            {
                this.$events[e] = evts[e];
            }
        }
    },
    /**
     * 设置属性
     */
    setAttributes : function(attrs)
    {
        var ats = attrs || {};
        for(var i in ats)
        {
            if(ats.hasOwnProperty(i))
            {
                this[i] = ats[i];
            }
        }
    },
    /**
     * 设置下拉框属性
     */
    setSelectAttribute : function()
    {
        var w = this.width;
        var h = this.height;
        var oh = this.optionHeight;
        var cssTexts = [
            '.xlib-select-panel{border:1px solid #7F9DB9; margin:0px; padding:1px; width:'+(w-2)+'px; height:'+(h-2)+'px; '+(window.opera ? 'display:inline-block;' : 'display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;')+'}',
            '.xlib-select-panel a{text-decoration:none; color:black; display:block; background-color:white; text-indent:3px; cursor:default;}',
            '.xlib-select-panel a.selected{background-color:#316AC5; color:white; display:block; text-indent:3px; cursor:default;}',
            '.xlib-select-panel .xlib-select{width:'+(w-2)+'px; height:'+(h-2)+'px;}',
            '.xlib-select-panel .xlib-select a{display:block; width:'+(w-18)+'px; height:'+(h-2)+'px; line-height:'+(h-2)+'px; margin:0px 1px 0px 0px; float:left; font-size:12px; }',
            '.xlib-select-panel .xlib-select code{display:block; width:15px; height:17px; float:left; background:transparent url(' + XLib.UI.RESOUCE_ROOT + 'img/select_arrow.gif) no-repeat 0 0; font-size:1px; line-height:1px;}',
            '.xlib-select-panel .xlib-select code.xlib-sel-ahover{background-position:0px -17px;}',
            '.xlib-select-panel .xlib-select-optionPanel{position:absolute; width:'+w+'px; height:auto; border:1px solid #7F9DB9; z-index:3000; display:none; background-color:white; font-size:12px;}',
            '.xlib-select-panel .xlib-select-optionPanel a.xlib-select-option{display:block; width:'+(w-2)+'px; height:'+oh+'px; line-height:'+oh+'px; background-color:white;}',
            '.xlib-select-panel .xlib-select-optionPanel a.selected{background-color:#316AC5; color:white; display:block; text-indent:3px; cursor:default;}'
        ];
        XLib.CSS.dynamicStyle(cssTexts, "xlib-select");
    },
    /**
     * 设置options面板的位置
     */
    setOptionPanelPos : function()
    {
        var ref = XLib.DOM.$E(this.$id);
        var pos = null;
        var ops = null;
        pos = XLib.getPosition(ref);
        ops = XLib.DOM.$E("sel_optionPanel_" + this.$id);
        ops.style.left = (pos.x + this.offsetX) + "px";
        ops.style.top = (pos.y + this.offsetY) + "px";
        ref = null;
        pos = null;
        ops = null;
    },
    /**
     * 设置option面板滚动条
     */
    setOptionPanelScrolling : function()
    {
        var size = this.$options.length;
        if(this.rows > 0 && size > this.rows){
           var ops = XLib.DOM.$E("sel_optionPanel_" + this.$id);
           ops.style.height = (this.rows * this.optionHeight) + "px";
           ops.style.overflowY = "auto";
           ops.style.overflowX = "hidden";
           ops = null;
        }
    },
    /**
     * 创建
     */
    create : function(htmlFor)
    {
        var panel = this.createPanel();
        var _for = XLib.DOM.$E(htmlFor);
        this.setSelectAttribute();
        XLib.DOM.$A(panel, _for);
        this.addEventHandler();
        return this;
    },
    /**
     * 添加一个option
     */
    add : function(option)
    {
        var item = null;
        var _this = this;
        option.index = this.$options.length;
        option.fixedIndex = ++this.$lastIndex;
        option.$select = this;
        this.$options.push(option);
        this.$htmlSelect.options[this.$htmlSelect.options.length] = new Option(option.text, option.value, option.defaultSelected, option.selected);
        XLib.DOM.$A(option.getItem(this.$id), XLib.DOM.$E("sel_optionPanel_" + this.$id));
    },
    /**
     * 删除option
     */
    remove : function(index)
    {
        this.$htmlSelect.remove(index);
        var option = XLib.DOM.$E("sel_option_" + this.id + "_" + this.$options[index].fixedIndex);
        if(null != option)
        {
            XLib.DOM.$D(option, XLib.DOM.$E("sel_optionPanel_" + this.id));
            this.$options.splice(index, 1);
            this.updateOption();
        }
        if(this.$options.length <= 0)
        {
            this.$lastIndex = -1;
        }
        option = null;
    },
    /**
     * 更新option
     */
    updateOption : function()
    {
        var size = this.$options.length;
        var option = null;
        for(var i = 0; i < size; i++){
            option = this.$options[i];
            option.index = i;
        }
    },
    /**
     * 设置select的值
     */
    setJSelectValue : function(option, index)
    {
        this.$value = option.value;
        this.$text = option.text;
        this.$defaultSelected = option.defaultSelected;
        this.$selected = option.selected;
        this.$selectedIndex = index;
        this.$htmlSelect.selectedIndex = index;
    },
    /**
     * 设置完成
     */
    done : function()
    {
        var size = this.$options.length;
        var option = null;
        var defOption = null;
        var selOption = null;
        var curOption = XLib.DOM.$E("sel_cur_" + this.$id);
        var defIndex = 0;
        var selIndex = 0;
        for(var i = 0; i < size; i++)
        {
            option = this.$options[i];
            if(option.defaultSelected)
            {
                defOption = option;
                defIndex = i;
            }
            if(option.selected)
            {
                selOption = option;
                selIndex = i;
            }
        }
        if(defOption == selOption && (null != defOption && null != selOption))
        {
            curOption.innerHTML = defOption.text;
            curOption.className = "selected";
            if(UA.Browser.chrome == -1 && UA.Browser.safari == -1)
            {
                curOption.focus();
            }
            this.setJSelectValue(defOption, defIndex);
        }
        else
        {
            if(null != selOption)
            {
                curOption.innerHTML = selOption.text;
                curOption.className = "selected";
                if(UA.Browser.chrome == -1 && UA.Browser.safari == -1)
                {
                    curOption.focus();
                }
                this.setJSelectValue(selOption, selIndex);
            }
            else if(null != defOption)
            {
                curOption.innerHTML = defOption.text;
                this.setJSelectValue(defOption, defIndex);
            }
            else
            {
                if(size > 0)
                {
                    curOption.innerHTML = this.$options[0].text;
                    this.setJSelectValue(this.$options[0], 0);
                }
            }
        }
        this.setOptionPanelScrolling();
        option = null;
        defOption = null;
        selOption = null;
        curOption = null;
    }
};
XLib.UI.JOption = function(text, value, defaultSelected, selected)
{
    this.text = text;
    this.value = value;
    this.defaultSelected = typeof(defaultSelected) == "boolean" ?  defaultSelected : false;
    this.selected = typeof(selected) == "boolean" ? selected : false;
    this.index = -1;
    this.fixedIndex = -1;
    this.$select = null;
};
XLib.UI.JOption.prototype = {
    /**
     * 获取Node
     */
    getItem : function(id)
    {
        var option = XLib.DOM.$C("a");
        var _this = this;
        option.className = "xlib-select-option";
        option.setAttribute("id", "sel_option_" + id + "_" + this.fixedIndex);
        option.setAttribute("value", this.value);
        option.setAttribute("defaultSelected", this.defaultSelected);
        option.setAttribute("selected", this.selected);
        option.setAttribute("href", "javascript:void(0);");
        option.innerHTML = this.text;
        XLib.Event.addEventListener(option, "mouseover", function(){_this.hover(id)}, [], false);
        XLib.Event.addEventListener(option, "mouseout", function(){_this.hout(id)}, [], false);
        XLib.Event.addEventListener(option, "click", function(){_this.setSelectValue()}, [], false);
        return option;
    },
    /*
     * 设置select值
     */
    setSelectValue : function()
    {
        var curOption = XLib.DOM.$E("sel_cur_" + this.$select.$id);
        var oldText = curOption.innerHTML;
        this.$select.$value = this.value;
        this.$select.$text = this.text;
        this.$select.$defaultSelected = this.defaultSelected;
        this.$select.$selected = this.selected;
        this.$select.$selectedIndex = this.index;
        this.$select.$htmlSelect.selectedIndex = this.index;
        curOption.innerHTML = this.text;
        if(UA.Browser.chrome == -1 && UA.Browser.safari == -1)
        {
            curOption.focus();
        }
        this.$select.showOptions(false);
        if(oldText != this.text)
        {
            if(UA.Browser.ie > 0)
            {
                XLib.Event.dispatchEvent(this.$select.$id, "propertychange", "Object", "{'beforeData':'"+oldText+"', 'selectedData':'"+this.text+"'}");
            }
            else
            {
                XLib.Event.dispatchEvent(this.$select.$id, "change", "Object", "{'beforeData':'"+oldText+"', 'selectedData':'"+this.text+"'}");
            }
        }
    },
    /**
     * 鼠标移上去的效果
     */
    hover : function(id)
    {
        var option = null;
        try
        {
            option = XLib.DOM.$E("sel_option_" + id + "_" + this.fixedIndex);
            option.className = "xlib-select-option selected";
            option.focus();
        }
        catch(e){}finally{option = null;}
    },
    /**
     * 鼠标移开的效果
     */
    hout : function(id)
    {
        var option = XLib.DOM.$E("sel_option_" + id + "_" + this.fixedIndex);
        option.className = "xlib-select-option";
        option = null;
    }
};
/**
 * 构造函数
 */
XLib.UI.SlidePanel = function()
{
    this.LEFT = 1;
    this.RIGHT = 2;
    this.TOP = 3;
    this.BOTTOM = 4;
    this.PREFIX = "slide_panel_";
    this.id = 0;                //panelId
    this.width = 550;           //内容宽度
    this.height = 400;          //内容高度
    this.wayWidth = 2;          //滑槽宽度
    this.wayHeight = 400;       //滑槽高度
    this.barWidth = 6;          //滑块宽度
    this.barHeight = 12;        //滑块高度
    this.scrollSize = 20;       //滚动偏移值
    this.layout = this.RIGHT;   //布局方式
    this.namespace = "sp";      //对象引用串
    this.target = document.body;//目标对象
    this.cssTexts = [];         //样式
};
XLib.UI.SlidePanel.prototype = {
    /**
     * 初始化
     * @param config
     */
    init : function(config)
    {
        config = config || {};
        this.setConfig(config);
        this.setStyle([
            '.slide-panel{position:relative; overflow:hidden; font-size:12px; margin:0px; padding:0px;}',
            '.slide-panel .slide-content{position:absolute; font-size:12px;}',
            '.slide-panel .slide-way{position:absolute; font-size:0px; line-height:0px; overflow:hidden;}',
            '.slide-panel .slide-bar{position:absolute; font-size:0px; line-height:0px; overflow:hidden;}',
            '.slide-panel .slide-bar-hover{position:absolute; font-size:0px; line-height:0px; overflow:hidden;}',
            '.slide-panel .slide-bar-dis{position:absolute; font-size:0px; line-height:0px; overflow:hidden;}'
        ], "xlib-slide-default");
        this.setStyle(this.cssTexts, "xlib-slide-self");
    },
    /**
     * 设置配置参数
     * @param config
     */
    setConfig : function(config)
    {
        this.id = config.id || 0;
        this.width = typeof(config.width) == "number" ? config.width : 550;
        this.height = typeof(config.height) == "number" ? config.height : 400;
        this.wayWidth = typeof(config.wayWidth) == "number" ? config.wayWidth : 2;
        this.wayHeight = typeof(config.wayHeight) == "number" ? config.wayHeight : 400;
        this.barWidth = typeof(config.barWidth) == "number" ? config.barWidth : 6;
        this.barHeight = typeof(config.barHeight) == "number" ? config.barHeight : 12;
        this.scrollSize = typeof(config.scrollSize) == "number" ? config.scrollSize : 20;
        this.layout = config.layout || this.RIGHT;
        this.namespace = config.namespace || "sp";
        this.target = config.target || document.body;
        this.cssTexts = config.cssTexts || [];
    },
    /**
     * 建立面板
     * @return DOM
     */
    createPanel : function()
    {
        var panel = XLib.DOM.$E(this.PREFIX + this.id);
        if(null == panel)
        {
            panel = XLib.DOM.$C("div");
            panel.setAttribute("id", this.PREFIX + this.id);
            panel.className = "slide-panel";
        }
        return panel;
    },
    /**
     * 建立内容区
     * @return DOM
     */
    createContentPanel : function()
    {
        var panel = XLib.DOM.$E(this.PREFIX + this.id + "_content");
        if(null == panel)
        {
            panel = XLib.DOM.$C("div");
            panel.setAttribute("id", this.PREFIX + this.id + "_content");
            panel.className = "slide-content";
        }
        return panel;
    },
    /**
     * 建立滑槽
     * @return DOM
     */
    createWayPanel : function()
    {
        var panel = XLib.DOM.$E(this.PREFIX + this.id + "_way");
        if(null == panel)
        {
            panel = XLib.DOM.$C("div");
            panel.setAttribute("id", this.PREFIX + this.id + "_way");
            panel.className = "slide-way";
        }
        return panel;
    },
    /**
     * 建立滑块
     * @return DOM
     */
    createBarPanel : function()
    {
        var panel = XLib.DOM.$E(this.PREFIX + this.id + "_bar");
        if(null == panel)
        {
            var _this = this;
            panel = XLib.DOM.$C("div");
            panel.setAttribute("id", this.PREFIX + this.id + "_bar");
            panel.className = "slide-bar-dis";
        }
        return panel;
    },
    /**
     * 设置样式
     * @param cssTexts
     * @param id
     */
    setStyle : function(cssTexts, id)
    {
        XLib.CSS.dynamicStyle(cssTexts||[], id);
    },
    /**
     * 布局
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    setLayout : function(panel, content, way, bar)
    {
        switch(this.layout)
        {
            case this.LEFT:
                this.layoutLeft(panel, content, way, bar);
                break;
            case this.RIGHT:
                this.layoutRight(panel, content, way, bar);
                break;
            case this.TOP:
                this.layoutTop(panel, content, way, bar);
                break;
            case this.BOTTOM:
                this.layoutBottom(panel, content, way, bar);
                break;
            default:
                this.layoutRight(panel, content, way, bar);
                break;
        }
    },
    /**
     * 左布局
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    layoutLeft : function(panel, content, way, bar)
    {
        var ow = Math.max(this.barWidth, this.wayWidth);
        var ol = this.barWidth > this.wayWidth ? Math.floor((this.barWidth - Math.max(this.wayWidth, 2)) / 2) : 0;
        panel.style.cssText = "width:" + (this.width + ow) + "px; height:" + this.height + "px;";
        content.style.cssText = "width:" + this.width + "px; height:auto; left:" + ow + "px; top:0px;";
        way.style.cssText = "width:" + this.wayWidth + "px; height:" + this.wayHeight + "px; left:" + ol + "px; top:0px;";
        bar.style.cssText = "width:" + this.barWidth + "px; height:" + this.barHeight + "px; left:0px; top:0px;";
    },
    /**
     * 右布局
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    layoutRight : function(panel, content, way, bar)
    {
        var ow = Math.max(this.barWidth, this.wayWidth);
        var ol = this.barWidth > this.wayWidth ? Math.floor((this.barWidth - Math.max(this.wayWidth, 2)) / 2) : 0;
        panel.style.cssText = "width:" + (this.width + ow) + "px; height:" + this.height + "px;";
        content.style.cssText = "width:" + this.width + "px; height:auto; left:0px; top:0px;";
        way.style.cssText = "width:" + this.wayWidth + "px; height:" + this.wayHeight + "px; left:" + (ol + this.width) + "px; top:0px;";
        bar.style.cssText = "width:" + this.barWidth + "px; height:" + this.barHeight + "px; left:" + this.width + "px; top:0px;";
    },
    /**
     * 上布局
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    layoutTop : function(panel, content, way, bar)
    {
        var oh = Math.max(this.barHeight, this.wayHeight);
        var ot = this.barHeight > this.wayHeight ? Math.floor((this.barHeight - Math.max(this.wayHeight, 2)) / 2) : 0;
        panel.style.cssText = "width:" + this.width + "px; height:" + (this.height + oh) + "px;";
        content.style.cssText = "width:auto; height:" + this.height + "px; left:0px; top:" + ot + "px;";
        way.style.cssText = "width:" + this.wayWidth + "px; height:" + this.wayHeight + "px; left:0px; top:" + ot + "px;";
        bar.style.cssText = "width:" + this.barWidth + "px; height:" + this.barHeight + "px; left:0px; top:0px;";
    },
    /**
     * 下布局
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    layoutBottom : function(panel, content, way, bar)
    {
        var oh = Math.max(this.barHeight, this.wayHeight);
        var ot = this.barHeight > this.wayHeight ? Math.floor((this.barHeight - Math.max(this.wayHeight, 2)) / 2) : 0;
        panel.style.cssText = "width:" + this.width + "px; height:" + (this.height + oh) + "px;";
        content.style.cssText = "width:auto; height:" + this.height + "px; left:0px; top:0px;";
        way.style.cssText = "width:" + this.wayWidth + "px; height:" + this.wayHeight + "px; left:0px; top:" + (this.height + ot) + "px;";
        bar.style.cssText = "width:" + this.barWidth + "px; height:" + this.barHeight + "px; left:0px; top:" + this.height + "px;";
    },
    /**
     * 设置数据
     * @param content
     * @param htmlItems
     */
    setData : function(content, htmlItems)
    {
        content.innerHTML = htmlItems.join("");
    },
    /**
     * 设置事件
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    setSlidePanelEvent : function(panel, content, way, bar)
    {
        var _flag = false;
        switch(this.layout)
        {
            case this.LEFT:
            case this.RIGHT:
                _flag = content.offsetHeight > this.height;
                content.style.top = "0px";
                bar.style.top = "0px";
                break;
            case this.TOP:
            case this.BOTTOM:
                _flag = content.offsetWidth > this.width;
                content.style.left = "0px";
                bar.style.left = "0px";
                break;
            default:
                _flag = content.offsetHeight > this.height;
                content.style.top = "0px";
                bar.style.top = "0px";
                break;
        }
        if(true == _flag)
        {
            way.style.display = "";
            bar.style.display = "";
            this.trigger(panel, content, way, bar);
        }
        else
        {
            way.style.display = "none";
            bar.style.display = "none";
        }
    },
    /**
     * 触发事件
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    trigger : function(panel, content, way, bar)
    {
        var _this = this;
        bar.className = "slide-bar";
        bar.onmouseover = function(){this.className = "slide-bar-hover";};
        bar.onmouseout = function(){this.className = "slide-bar";};
        XLib.Event.addEventListener(bar, "mousedown", function(){
            this.className = "slide-bar-hover";
            _this.triggerScroll(panel, content, way, bar);
        }, [], false);
        XLib.Event.addEventListener(panel, "mouseover", function(){
            _this.triggerWheel(panel, content, way, bar);
        }, [], false);
    },
    /**
     * 触发滚动事件
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    triggerScroll : function(panel, content, way, bar)
    {
        switch(this.layout)
        {
            case this.LEFT:
            case this.RIGHT:
                this.verticalScroll(panel, content, way, bar);
                break;
            case this.TOP:
            case this.BOTTOM:
                this.horizontalScroll(panel, content, way, bar);
                break;
            default:
                this.verticalScroll(panel, content, way, bar);
                break;
        }
    },
    /**
     * 垂直
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    verticalScroll : function(panel, content, way, bar)
    {
        var t = XLib.Event.getClientY() - bar.offsetTop;
        var _this = this;
        var handler = function ()
        {
            var h = 0;
            h = Math.min(Math.max(XLib.Event.getClientY() - t, 0), _this.wayHeight - _this.barHeight);
            _this.calc(0, h, panel, content, way, bar);
            bar.className = "slide-bar-hover";
            XLib.Event.preventDefault();
            XLib.Event.stopPropagation();
            return false;
        };
        XLib.Event.addEventListener(document, "mousemove", handler, [], false);
        XLib.Event.addEventListener(document, "mouseup", function ()
        {
            bar.className = "slide-bar";
            XLib.Event.removeEventListener(document, "mousemove", handler, [], false);
            XLib.Event.removeEventListener(document, "mouseup", arguments.callee, [], false);
        }, [], false);
    },
    /**
     * 水平
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    horizontalScroll : function(panel, content, way, bar)
    {
        var l = XLib.Event.getClientX() - bar.offsetLeft;
        var _this = this;
        var handler = function ()
        {
            var w = 0;
            w = Math.min(Math.max(XLib.Event.getClientX() - l, 0), _this.wayWidth - _this.barWidth);
            _this.calc(1, w, panel, content, way, bar);
            bar.className = "slide-bar-hover";
            XLib.Event.preventDefault();
            XLib.Event.stopPropagation();
            return false;
        };
        XLib.Event.addEventListener(document, "mousemove", handler, [], false);
        XLib.Event.addEventListener(document, "mouseup", function ()
        {
            bar.className = "slide-bar";
            XLib.Event.removeEventListener(document, "mousemove", handler, [], false);
            XLib.Event.removeEventListener(document, "mouseup", arguments.callee, [], false);
        }, [], false);
    },
    /**
     * 触发鼠标滚轮事件
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    triggerWheel : function(panel, content, way, bar)
    {
        switch(this.layout)
        {
            case this.LEFT:
            case this.RIGHT:
                this.verticalWheelScroll(panel, content, way, bar);
                break;
            case this.TOP:
            case this.BOTTOM:
                this.horizontalWheelScroll(panel, content, way, bar);
                break;
            default:
                this.verticalWheelScroll(panel, content, way, bar);
                break;
        }
    },
    /**
     * 垂直滚动
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    verticalWheelScroll : function(panel, content, way, bar)
    {
        var _this = this;
        var _event = UA.Browser.ie > 0 ? "mousewheel" : "DOMMouseScroll";
        var handler = function()
        {
            var h = 0;
            var delta = 0;
            var isIE = UA.Browser.ie > 0;
            document.documentElement.style.overflow = "hidden";
            delta = isIE ? XLib.Event.getEvent().wheelDelta / 10 : XLib.Event.getEvent().detail * -4;
            h = Math.min(Math.max(bar.offsetTop - delta, 0), _this.wayHeight - _this.barHeight);
            _this.calc(0, h, panel, content, way, bar);
            XLib.Event.preventDefault();
            XLib.Event.stopPropagation();
            return false;
        };
        XLib.Event.addEventListener(document, _event, handler, [], false);
        XLib.Event.addEventListener(document, "mouseout", function ()
        {
            document.documentElement.style.overflow = "";
            XLib.Event.removeEventListener(document, _event, handler, [], false);
            XLib.Event.removeEventListener(document, "mouseout", arguments.callee, [], false);
        }, [], false);
    },
    /**
     * 水平滚动
     * @param panel 主面板
     * @param content 内容面板
     * @param way 滑槽
     * @param bar 滑块
     */
    horizontalWheelScroll : function(panel, content, way, bar)
    {
        var _this = this;
        var _event = UA.Browser.ie > 0 ? "mousewheel" : "DOMMouseScroll";
        var handler = function()
        {
            var w = 0;
            var delta = 0;
            var isIE = UA.Browser.ie > 0;
            document.documentElement.style.overflow = "hidden";
            delta = isIE ? XLib.Event.getEvent().wheelDelta / 10 : XLib.Event.getEvent().detail * -4;
            w = Math.min(Math.max(bar.offsetLeft - delta, 0), _this.wayWidth - _this.barWidth);
            _this.calc(1, w, panel, content, way, bar);
            XLib.Event.preventDefault();
            XLib.Event.stopPropagation();
            return false;
        };
        XLib.Event.addEventListener(document, _event, handler, [], false);
        XLib.Event.addEventListener(document, "mouseout", function ()
        {
            document.documentElement.style.overflow = "";
            XLib.Event.removeEventListener(document, _event, handler, [], false);
            XLib.Event.removeEventListener(document, "mouseout", arguments.callee, [], false);
        }, [], false);
    },
    /**
     * 计算位置
     */
    calc : function(type, pos, panel, content, way, bar)
    {
        var times = 0;
        var cPos = 0;
        if(1 == type){
            times = (content.offsetWidth - this.width) / (this.width - this.barWidth);
            cPos = times * pos;
            content.style.left = "-" + cPos + "px";
            bar.style.left = pos + "px";
        }else{
            times = (content.offsetHeight - this.height) / (this.height - this.barHeight);
            cPos = times * pos;
            content.style.top = "-" + cPos + "px";
            bar.style.top = pos + "px";
        }
    },
    /**
     * 创建
     * @param htmlItems
     */
    create : function(htmlItems)
    {
        htmlItems = htmlItems || [];
        var panel = this.createPanel();
        var content = this.createContentPanel();
        var way = this.createWayPanel();
        var bar = this.createBarPanel();
        XLib.DOM.$A(content, panel);
        XLib.DOM.$A(way, panel);
        XLib.DOM.$A(bar, panel);
        this.setLayout(panel, content, way, bar);
        this.setData(content, htmlItems);
        XLib.DOM.$A(panel, XLib.DOM.$E(this.target));
        this.setSlidePanelEvent(panel, content, way, bar);
    },
    /**
     * 更新数据
     * @param htmlItems
     */
    updateData : function(htmlItems)
    {
        htmlItems = htmlItems || [];
        var panel = XLib.DOM.$E(this.PREFIX + this.id);
        var content = XLib.DOM.$E(this.PREFIX + this.id + "_content");
        var way =XLib.DOM.$E(this.PREFIX + this.id + "_way");
        var bar = XLib.DOM.$E(this.PREFIX + this.id + "_bar");
        if(null != content)
        {
            this.setData(content, htmlItems);
            this.setSlidePanelEvent(panel, content, way, bar);
        }
    }
};
/**
 * 构造函数
 */
XLib.UI.Slider = function()
{
    this.HORIZONTAL = 0;
    this.VERTICAL = 1;
    this.EASE = {
        IN : 0,
        OUT : 1,
        INOUT : 2
    };
    this.config = {
        interval : 5000,                        //切换周期
        width : 300,                            //宽度
        height : 120,                           //高度
        speed : 10,                             //速度
        begin : 0,                              //起始点
        change : 300,                           //变化量
        duration : 10,                          //持续时长
        paramA : 0,                             //Elastic或Back参数
        paramB : 0,                             //Elastic参数
        easing : "Expo",                        //缓动
        easingType : this.EASE.IN,              //缓动类型
        dir : this.HORIZONTAL,                  //方向
        container : "xlib_slider_container",    //父级容器
        slider : "xlib_slider",                 //滑动块容器
        scroller : "xlib_slider_scroller",      //滑动块
        blockClass : "xlib-slider-block",       //滑动块的子项class，用于计算子项个数
        subtitle : "xlib_slider_subtitle",      //子标题
        titleClass : "xlib-slider-title",       //子标题的class，用于计算子标题个数
        currentClass : "xlib-cur",              //当前选择的class
        eventType : "click"                     //手动触发幻灯片事件类型
    };
    this.timer = null;
    this.scrollTimer = null;
    this.currentIndex = 0;
    this.container = null;
    this.slider = null;
    this.scroller = null;
    this.subtitle = null;
    this.blocks = [];
    this.blockSize = 0;
    this.titles = [];
    this.titleSize = 0;
};
XLib.UI.Slider.prototype = {
    /**
     * 初始化
     * @param cfg 配置参数
     */
    init : function(cfg)
    {
        var conf = cfg || {};
        for(var key in conf)
        {
            if(conf.hasOwnProperty(key))
            {
                this.config[key] = conf[key];
            }
        }
    },
    /**
     * 获取配置参数
     */
    getConfig : function()
    {
        return this.config;
    },
    /**
     * 设置属性
     */
    setSliderProperty : function()
    {
        var cfg = this.getConfig();

        this.container = XLib.DOM.$E(cfg.container);
        this.slider = XLib.DOM.$E(cfg.slider);
        this.scroller = XLib.DOM.$E(cfg.scroller);
        this.subtitle = XLib.DOM.$E(cfg.subtitle);
        this.blocks = XLib.DOM.getElementsByClassName(cfg.blockClass, this.scroller, false);
        this.blockSize = this.blocks.length;
        this.titles = XLib.DOM.getElementsByClassName(cfg.titleClass, this.subtitle, false);;
        this.titleSize = this.titles.length;
        this.currentIndex = 0;

        this.setSlider();
        this.setSubtitleEvent();
        this.resetSubtitleStatus();
        this.setContainerEvent();
    },
    /**
     * 设置slide定时器和大小
     */
    setSlider : function()
    {
        var cfg = this.getConfig();
        if(this.VERTICAL == cfg.dir)
        {
            var maxHeight = (cfg.height * this.blockSize);
            this.scroller.style.height = maxHeight + "px";
        }
        else
        {
            var maxWidth = (cfg.width * this.blockSize);
            this.scroller.style.width = maxWidth + "px";
        }
        this.play();
    },
    /**
     * 清除定时器
     */
    clearTimer : function()
    {
        if(null != this.timer){
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    /**
     * 清除定时器
     */
    clearScrollTimer : function()
    {
        if(null != this.scrollTimer){
            clearInterval(this.scrollTimer);
            this.scrollTimer = null;
        }
    },

    /**
     * 播放
     */
    play : function()
    {
        var cfg = this.getConfig();
        var _this = this;
        var index = 0;
        this.timer = setInterval(function()
        {
            index = _this.currentIndex + 1;
            if(index >= _this.blockSize)
            {
                index = 0;
            }
            _this.gotoAndPlay(index);
        }, cfg.interval);
    },
    /**
     * 直接定位到某个位置，并重新开始
     */
    gotoAndPlay : function(index)
    {
        if(index != this.currentIndex)
        {
            this.clearScrollTimer();

            var cfg = this.getConfig();
            var pre = this.currentIndex;
            var isVertical = (this.VERTICAL == cfg.dir);
            var offset = (index - pre);
            var isNext = (offset > 0);
            var change = cfg.change * Math.abs(index - pre);
            var begin = cfg.change * pre;
            var _this = this;

            this.currentIndex = index;
            this.resetSubtitleStatus();

            var time = 0;
            this.scrollTimer = setInterval(function(){
                var val = 0;
                if(isNext)
                {
                    if(_this.EASE.OUT == cfg.easingType)
                    {
                        val = -Math.ceil(XLib.Tween.Easing[cfg.easing].easeOut(time, begin, change, cfg.duration, cfg.paramA, cfg.paramB));
                    }
                    else if(_this.EASE.INOUT == cfg.easingType)
                    {
                        val = -Math.ceil(XLib.Tween.Easing[cfg.easing].easeInOut(time, begin, change, cfg.duration, cfg.paramA, cfg.paramB));
                    }
                    else
                    {
                        val = -Math.ceil(XLib.Tween.Easing[cfg.easing].easeIn(time, begin, change, cfg.duration, cfg.paramA, cfg.paramB));
                    }
                }
                else
                {
                    if(_this.EASE.OUT == cfg.easingType)
                    {
                        val = Math.ceil(XLib.Tween.Easing[cfg.easing].easeOut(time, -begin, change, cfg.duration, cfg.paramA, cfg.paramB));
                    }
                    else if(_this.EASE.INOUT == cfg.easingType)
                    {
                        val = Math.ceil(XLib.Tween.Easing[cfg.easing].easeInOut(time, -begin, change, cfg.duration, cfg.paramA, cfg.paramB));
                    }
                    else
                    {
                        val = Math.ceil(XLib.Tween.Easing[cfg.easing].easeIn(time, -begin, change, cfg.duration, cfg.paramA, cfg.paramB));
                    }
                }
                if(time >= cfg.duration)
                {
                    _this.clearScrollTimer();
                }
                if(isVertical)
                {
                    _this.scroller.style.marginTop = val + "px";
                }
                else
                {
                    _this.scroller.style.marginLeft = val + "px";
                }
                time++
            }, cfg.speed);



        }
    },
    /**
     * 设置事件
     */
    setSubtitleEvent : function()
    {
        var cfg = this.getConfig();
        var subtitle = XLib.DOM.$E(cfg.subtitle);
        var titleSize = this.titles.length;
        var title = null;
        for(var i = 0; i < titleSize; i++)
        {
            title = this.titles[i];
            XLib.Event.addEventListener(title, cfg.eventType, function(index, oSlide)
            {
                if(index !== oSlide.currentIndex)
                {
                    oSlide.gotoAndPlay(index);
                }
            }, [i, this], false);
        }
    },
    /**
     * 重置标题状态
     */
    resetSubtitleStatus : function()
    {
        var cfg = this.getConfig();
        var titleSize = this.titles.length;
        var title = null;
        for(var i = 0; i < titleSize; i++)
        {
            title = this.titles[i];
            XLib.CSS.removeClass(title, cfg.currentClass);
        }
        XLib.CSS.addClass(this.titles[this.currentIndex], cfg.currentClass);
    },
    /**
     * 设置容器事件
     */
    setContainerEvent : function()
    {
        XLib.Event.addEventListener(this.container, "mouseover", function(oSlide){
            oSlide.stop();
        }, [this], false);
        XLib.Event.addEventListener(this.container, "mouseout", function(oSlide){
            oSlide.play();
        }, [this], false);
    },
    /**
     * 启动
     */
    start : function()
    {
        this.setSliderProperty();
    },
    /**
     * 停止
     */
    stop : function()
    {
        this.clearTimer();
    }
};
/**
 * 功能浮层，构造函数
 * @param Boolean isAlwaysOnTop 是否显示在最顶层
 */
XLib.UI.DDLayer = function(isAlwaysOnTop)
{
    this.alwaysOnTop = isAlwaysOnTop || false;
    this.isAutoHeight = false;
    this.isAutoLeft = false;
    this.isAutoTop = false;
};
XLib.UI.DDLayer.prototype = {
    /**
     * 设置样式
     * @param Array cssRules 样式表
     */
    setStyle : function(cssRules)
    {
        var rules = ['.xlib-inline-block{display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; vertical-align:middle;}',
                     '.xlib-ddlayer-button{height:20px; line-height:20px; border:#76ABD3 solid 1px; border-bottom:none; background-color:#fff; color:#000; position:absolute; z-index:100; padding:0; text-align:center; overflow-y:hidden; cursor:default;}',
                     '.xlib-ddlayer-panel{border:#76ABD3 solid 1px; background-color:#fff; position:absolute; z-index:99;}',
                     '.xlib-ddlayer-title{padding-top:3px; font-size:12px; display:block; height:29px; line-height:29px; text-indent:5px; background-color:#EBF2FA; margin-bottom:5px;}',
                     '.xlib-ddlayer-iframe{width:100%; height:100%; position:absolute; left:-3px; top:-3px; z-index:-1; filter:Alpha(opacity=0); -moz-opacity:0; opactity:0;}',
                     '.xlib-ddlayer-mask{position:absolute; z-index:98; background-color:#76ABD3; filter:Alpha(opacity=40); -moz-opacity:0.40; opactity:0.40;}',
                     '.xlib-ddlayer-arrow{width:7px; height:20px; font-size:0px; background:transparent url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat -244px -85px; position:absolute; right:8px; top:1px;}',
                     '.xlib-ddlayer-closer{position:absolute; right:3px; top:3px; z-index:100; font-size:1px; line-height:1px; display:block; width:18px; height:18px; background:transparent url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat -262px -83px; cursor:pointer;}',
                     '.xlib-ddlayer-closer:hover{background-position:-262px -102px;}',
                     '.xlib-ddlayer-btn-closer{right:4px; top:4px;}',
                     '.xlib-ddlayer-mask-full{position:absolute; left:0px; top:0px; background-color:#000; filter:Alpha(opacity=45); -moz-opacity:0.45; opactity:0.45; z-index:97; border:none;}'
                    ];
        var style = XLib.DOM.$E("dynamic_style_xlib_ddlayer");
        if(null != style)
        {
            XLib.DOM.$D(style, style.parentNode);
        }
        XLib.CSS.dynamicStyle((cssRules || rules), "xlib_ddlayer");
    },
    /**
     * 创建IFRAME
     * @param String id 唯一串
     * @param String css 附加css
     * @return Object iframe对象
     */
    createIframe : function(id, css)
    {
        var ifr = XLib.UI.createIframe(id, "about:blank", null);
        ifr.className = "xlib-ddlayer-iframe";
        ifr.style.cssText = css;
        return ifr;
    },
    /**
     * 创建遮罩层
     * @param String id 唯一串
     * @param String css 附加css
     * @return Object mask对象
     */
    createMask : function(id, css){
        var mask = XLib.DOM.$C("div");
        mask.setAttribute("id", id);
        mask.className = "xlib-ddlayer-mask";
        mask.style.cssText = css;
        return mask;
    },
    /**
     * 绑定mouseup事件
     * @param String id 浮动功能层ID
     */
    setMouseUp : function(id){
        XLib.Event.addEventListener(document, "mouseup", function(layer, id){
            layer.hidden(id);
            XLib.Event.preventDefault();
            XLib.Event.stopPropagation();
            XLib.Event.removeEventListener(document, "mouseup", arguments.callee, [layer, id], false);
        }, [this, id], false);
    },
    /**
     * 显示开关
     * @param String id 浮动功能层ID
     * @param Boolean isShow 是否显示
     */
    display : function(id ,isShow){
        var dis = isShow ? "block" : "none";
        if(XLib.DOM.$E(id + "_button")){
            XLib.DOM.$E(id + "_button").style.display = dis;
        }
        if(XLib.DOM.$E(id + "_panel")){
            XLib.DOM.$E(id + "_panel").style.display = dis;
        }
        if(XLib.DOM.$E(id + "_button_mask")){
            XLib.DOM.$E(id + "_button_mask").style.display = dis;
        }
        if(XLib.DOM.$E(id + "_panel_mask")){
            XLib.DOM.$E(id + "_panel_mask").style.display = dis;
        }
        if(XLib.DOM.$E(id + "_mask_full")){
            XLib.DOM.$E(id + "_mask_full").style.display = dis;
        }
    },
    /**
     * 重置高度
     * @param String id ddlayerID
     * @param int height 高度（可选）
     */
    resetHeight : function(id, height){
        var panel = XLib.DOM.$E(id + "_panel");
        var mask = XLib.DOM.$E(id + "_panel_mask");
        var ifr = XLib.DOM.$E(id + "_iframe");
        panel.style.height = "auto";
        if(height){
            panel.style.height = height + "px";
            mask.style.height = (height + 2) + "px";
            ifr.style.height = (height + 5) + "px";
        }else{
            var offsetHeight = panel.offsetHeight + 5;
            panel.style.height = offsetHeight + "px";
            mask.style.height = (offsetHeight + 2) + "px";
            ifr.style.height = (offsetHeight + 5) + "px";
        }
    },
    /**
     * 重置位置/遮罩层大小
     * @param String id ddlayerID
     * @param int left 左位置（可选）
     * @param int top 右位置（可选）
     * @param Boolean isResetHeight 是否重置高度（可选）
     */
    reset : function(layer, id, left, top){
        var _h = ((typeof(height) == "undefined" || isNaN(height)) ? undefined : height);
        var _l = ((typeof(left) == "undefined" || isNaN(left)) ? undefined : left);
        var _t = ((typeof(top) == "undefined" || isNaN(top)) ? undefined : top);

        var panel = XLib.DOM.$E(id + "_panel");
        var panel_mask = XLib.DOM.$E(id + "_panel_mask");
        var full_mask = XLib.DOM.$E(id + "_mask_full");
        var doc = XLib.BOM.getDocumentSize();
        var viewport = XLib.BOM.getViewportSize();
        var scroll = XLib.BOM.getScrollPosition();
        var _pw = panel.offsetWidth;
        var _ph = panel.offsetHeight;
        var _pl = (undefined === _l ? Math.max(Math.floor(viewport.width / 2 - _pw / 2), 0) : _l) + scroll.left;
        var _pt = (undefined === _t ? Math.max(Math.floor(viewport.height / 2 - _ph / 2), 0) : _t) + scroll.top;

        if(layer.isAutoLeft){
            panel.style.left = _pl + "px";
            panel_mask.style.left = (_pl + 1) + "px";
        }

        if(layer.isAutoTop){
            panel.style.top = _pt + "px";
            panel_mask.style.top = (_pt + 1) + "px";
        }

        if(full_mask){
            full_mask.style.width = doc.width + "px";
            full_mask.style.height = doc.height + "px";
        }

        try{
            XLib.Event.preventDefault();
            XLib.Event.stopPropagation();
        }catch(e){}
    },
    /**
     * 显示浮动层
     * @param String id 浮动层ID
     * @param Boolean isBind 是否绑定mouseup事件
     */
    show : function(id, isBind){
        this.display(id, true);
        try{XLib.Event.preventDefault(); XLib.Event.stopPropagation();}catch(e){}
        if(this.isAutoHeight){
            this.resetHeight(id);
        }
        if(this.isAutoLeft || this.isAutoTop){
            this.reset(this, id);
        }
        if(true === isBind){
            this.setMouseUp(id);
        }
        return this;
    },
    /**
     * 隐藏
     * @param String id 浮动层ID
     */
    hidden : function(id){
        this.display(id, false);
    },
    /**
     * 生成按钮
     * @param String id 浮动层ID
     * @param String text 文字
     * @param int width 宽度
     * @param int left 左定位
     * @param int top 右定位
     * @param Boolean arrow 是否显示下拉图标
     * @param Boolean btnCloser 是否在按上显示关闭
     * @param Boolean closer 是否显示关闭
     * @param Boolean auto 自动隐藏
     * @return Object {btn,mask,isExistPanel,isExistMask}
     */
    createButton : function(id, text, width, left, top, arrow, btnCloser, closer, auto){
        var button = XLib.DOM.$E(id + "_button");
        var btnMask = XLib.DOM.$E(id + "_button_mask");
        var oArrow = null;
        var oCloser = null;
        var _this = this;
        var existButton = true;
        var existMask = true;
        if(null == button){
            existButton = false;
            button = XLib.DOM.$C("div");
            button.setAttribute("id", id + "_button");
            button.className = "xlib-ddlayer-button";
            button.innerHTML = '<span id="'+ id +'_button_text">'+ text + '</span>';
            if(true !== closer && true === auto){
                XLib.Event.addEventListener(button, "mouseout", function(layer, id){
                    layer.hidden(id);
                }, [this, id], false);
            }
            XLib.Event.addEventListener(button, "mouseover", function(layer, id){
                layer.display(id, true);
            }, [this, id], false);
            XLib.Event.addEventListener(button, "mouseup", function(){
                XLib.Event.preventDefault();
                XLib.Event.stopPropagation();
            }, [], false);
            if(true === arrow){
                oArrow = XLib.DOM.$C("em");
                oArrow.className = "xlib-inline-block xlib-ddlayer-arrow";
                XLib.Event.addEventListener(button, "click", function(layer, id){
                    layer.hidden(id);
                }, [this, id], false);
                button.appendChild(oArrow);
            }
            if(true === btnCloser){
                oCloser = XLib.DOM.$C("em");
                oCloser.className = "xlib-ddlayer-closer xlib-ddlayer-btn-closer";
                oCloser.setAttribute("title", "关闭");
                XLib.Event.addEventListener(oCloser, "click", function(layer, id){
                    layer.hidden(id);
                }, [this, id], false);
                button.appendChild(oCloser);
            }
        }
        button.style.cssText = "width:"+width+"px; left:"+left+"px; top:"+top+"px; display:none;" + (this.alwaysOnTop ? " z-index:6000" : "");
        var maskCSS = "width:"+(width+2)+"px; left:"+(left+1)+"px; top:"+(top+1)+"px; height:20px; padding:0; display:none;" + (this.alwaysOnTop ? " z-index:5998" : "");
        if(null == btnMask){
            existMask = false;
            btnMask = this.createMask(id + "_button_mask", maskCSS);
        }else{
            btnMask.style.cssText = maskCSS;
        }
        return {btn:button, mask:btnMask, isExistButton:existButton, isExistMask:existMask};
    },
    /**
     * 生成标题
     * @param String id 浮动层ID
     * @param String title 标题
     * @return String 标题HTML串
     */
    createTitle : function(id, title){
        var str = '';
        if(null != title){
            str = '<h2 id="'+id+'_title" class="xlib-ddlayer-title">'+title+'</h2>';
        }
        return str;
    },
    /**
     * 生成面板
     * @param String id 浮动层ID
     * @param String title 标题，没有时传null
     * @param String content 内容
     * @param int width 宽度
     * @param int height 高度
     * @param int left 左定位
     * @param int top 上定位
     * @param Boolean closer 是否显示关闭
     * @param Boolean auto 自动隐藏
     * @return Object {panel,mask,isExistPanel,isExistMask}
     */
    createPanel : function(id, title, content, width, height, left, top, closer, auto){
        var _panel = XLib.DOM.$E(id + "_panel");
        var panelMask = XLib.DOM.$E(id + "_panel_mask");
        var oCloser = null;
        var ifr = XLib.DOM.$E(id + "_iframe");
        var _this = this;
        var _title = this.createTitle(id, title);
        var existPanel = true;
        var existMask = true;
        this.isAutoHeight = isNaN(height);
        this.isAutoLeft = isNaN(left);
        this.isAutoTop = isNaN(top);

        left = this.isAutoLeft ? 0 : left;
        top = this.isAutoTop ? 0 : top;

        if(null == _panel){
            existPanel = false;
            _panel = XLib.DOM.$C("div");
            _panel.setAttribute("id", id + "_panel");
            _panel.className = "xlib-ddlayer-panel";
            _panel.innerHTML = _title + '<div id="' + id + '_content_body">'+ content + '</div>';
            XLib.Event.addEventListener(_panel, "mouseover", function(layer, id){
                layer.display(id, true);
            }, [this, id], false);
            XLib.Event.addEventListener(_panel, "mouseup", function(){
                XLib.Event.preventDefault();
                XLib.Event.stopPropagation();
            }, [], false);
            if(true === closer){
                oCloser = XLib.DOM.$C("em");
                oCloser.className = "xlib-ddlayer-closer";
                oCloser.setAttribute("title", "关闭");
                XLib.Event.addEventListener(oCloser, "click", function(layer, id){
                    layer.hidden(id);
                }, [this, id], false);
                if("" != _title){
                    oCloser.style.cssText = "right:5px; top:5px;"
                }
                _panel.appendChild(oCloser);
            }else{
                if(true === auto){
                    XLib.Event.addEventListener(_panel, "mouseout", function(layer, id){
                        layer.hidden(id);
                    }, [this, id], false);
                }
            }
        }
        _panel.style.cssText = "width:"+width+"px; height:"+(this.isAutoHeight ? height : height + "px")+"; left:"+left+"px; top:"+top+"px; display:none;" + (this.alwaysOnTop ? " z-index:5999" : "");
        var maskCSS = "width:"+(width+2)+"px; height:"+(this.isAutoHeight ? height : (height+2) + "px")+"; left:"+(left+1)+"px; top:"+(top+1)+"px; display:none;" + (this.alwaysOnTop ? " z-index:5998" : "");
        var ifrCSS = "width:"+(width+5)+"px; height:"+(this.isAutoHeight ? height : (height+5) + "px")+"; left:-3px; top:-3px;";
        if(null == panelMask){
            existMask = false;
            panelMask = this.createMask(id + "_panel_mask", maskCSS);
            ifr = this.createIframe(id + "_iframe", ifrCSS);
            panelMask.appendChild(ifr);
        }else{
            panelMask.style.cssText = maskCSS;
            ifr.style.cssText = ifrCSS;
        }
        return {panel:_panel, mask:panelMask, isExistPanel:existPanel, isExistMask:existMask};
    },
    /**
     * 创建全屏遮罩层
     * @param String id 浮动层ID
     * @return Object {mask, isExistMask}
     */
    createFullMask : function(id){
        var mask = XLib.DOM.$E(id + "_mask_full");
        var existMask = true;
        if(null == mask){
            existMask = false;
            var doc = XLib.BOM.getDocumentSize();
            var ifr = this.createIframe(id + "_mask_ifr_full", "position:absolute; z-index:-1; width:" + doc.width + "px; height:" + doc.height + "px; left:0px; top:0px;");
            mask = XLib.DOM.$C("div");
            mask.setAttribute("id", id + "_mask_full");
            mask.className = "xlib-ddlayer-mask-full";
            mask.style.cssText = "width:"+doc.width+"px;height:"+doc.height+"px; display:none;";
            mask.appendChild(ifr);
        }
        return {mask:mask, isExistMask:existMask};
    },
    /**
     * 设置标题文字
     * @param String id 浮动层ID
     * @param String text 文字
     */
    setTitleText : function(id, text){
        if(XLib.DOM.$E(id + "_title")){
            XLib.DOM.$E(id + "_title").innerHTML = text;
        }
    },
    /**
     * 设置按钮文字
     * @param String id 浮动层ID
     * @param String text 文字
     */
    setButtonText : function(id, text){
        XLib.DOM.$E(id + "_button_text").innerHTML = text;
    },
    /**
     * 设置面板内容
     * @param String id 浮动层ID
     * @param String text 内容
     */
    setPanelText : function(id, text){
        XLib.DOM.$E(id + "_content_body").innerHTML = text;
        if(this.isAutoHeight){
            this.resetHeight(id);
        }
        if(this.isAutoLeft || this.isAutoTop){
            this.reset(this, id);
        }
    },
    /**
     * 创建浮层
     * @param String id 浮动层ID
     * @param String pos 创建位置
     * @param Object button {text,width,left,top,arrow,closer}
     * @param Object panel {title,content,width,height,left,top,closer,auto,mask}
     */
    create : function(id, pos, button, panel){
        var isAuto = typeof(panel.auto) == "boolean" ? panel.auto : true;
        var oButton = null != button ? this.createButton(id, button.text, button.width, button.left, button.top, button.arrow, button.closer||false, panel.closer, isAuto) : null;
        var oPanel = this.createPanel(id, panel.title||null, panel.content, panel.width, panel.height, panel.left, panel.top, panel.closer, isAuto);
        var oMask = true === panel.mask ? this.createFullMask(id) : null;
        var tar = XLib.DOM.$E(pos || document.body);
        if(null != oButton && false === oButton.isExistButton){
            tar.appendChild(oButton.btn);
        }
        if(false === oPanel.isExistPanel){
            tar.appendChild(oPanel.panel);
        }
        if(null != oButton && false === oButton.isExistMask){
            tar.appendChild(oButton.mask);
        }
        if(false === oPanel.isExistMask){
            tar.appendChild(oPanel.mask);
        }
        if(null != oMask && false === oMask.isExistMask){
            tar.appendChild(oMask.mask);
        }
        this.setStyle();
        if(null == button && (this.isAutoLeft || this.isAutoTop)){
            XLib.Event.addEventListener(window, "resize", this.reset, [this, id, panel.left, panel.top], false);
            XLib.Event.addEventListener(window, "scroll", this.reset, [this, id, panel.left, panel.top], true);
        }
        oButton = null;
        oPanel = null;
    }
};

/**
 * 浮层（构造函数）
 */
XLib.UI.GLayer = function()
{
    this.PREFIX = "XLib_UI_GLayer_"; //前缀
    this.isBindEvent = false; // 是否绑定reset和scroll事件

    //配置参数
    this.config = {
        zIndex : 3000,   //z轴
        id : "glayer_0", //ID
        width : 550, //宽度
        height : 0,  //高度 0:自动
        title : null, //为null时，不显示
        closer : true, //显否显示关闭按钮
        content : null, //内容
        frame : false, //是否为frame, 如果为frame,content为frame的URL
        drag : true, //是否允许拖动
        delay : 0, //自动延时隐藏（秒）
        overflow : {x:'hidden', y:'auto'} //内容溢出处理
    };

    this.offset = 6;
    this.radius = 3;

    //设置默认样式
    var cssTexts = [
        '.xlib-ui-glayer-full{display:block; position:absolute; left:0px; top:0px; margin:0; padding:0; background-color:#000; filter:Alpha(opacity=20); opacity:0.2; z-index:' + (this.config.zIndex - 1) + ';}',
        '.xlib-ui-glayer-full iframe{background-color:transparent; filter:Alpha(opacity=0); opacity:0.0;}',
        '.xlib-ui-glayer-panel{display:block; position:absolute; left:0px; top:0px; margin:0; padding:0; width:auto; height:auto; font:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif; width:550px; height:400px; z-index:' + this.config.zIndex + ';}',
        '.xlib-ui-glayer-mask{display:block; position:absolute; left:0px; top:0px; background-color:#000; filter:Alpha(opacity=50); opacity:0.5; border-radius:' + this.radius + 'px; -moz-border-radius:' + this.radius + 'px; -webkit-border-radius:' + this.radius + 'px; z-index:1;}',
        '.xlib-ui-glayer-content{display:block; position:relative; margin:' + this.offset + 'px; +top:' + this.offset + 'px; width:auto; height:auto; background-color:#fff; z-index:2;}',
        '.xlib-ui-glayer-title{display:block; margin:0; padding:0;  padding-top:3px;font:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif; background-color:#EBF2FA; height:29px; line-height:29px; text-indent:15px; font-weight:bold; overflow:hidden;}',
        '.xlib-ui-glayer-closer{display:block; position:absolute; right:5px; top:5px; background:transparent url(' + XLib.UI.RESOUCE_ROOT + 'img/ui.png?v=' + this.CACHE_TIME + ') no-repeat -262px -83px; font:0px/0 Tahoma,Helvetica,Arial,Simsun,sans-serif; width:18px; height:18px; text-indent:-1000px;}',
        '.xlib-ui-glayer-closer:hover{background-position:-262px -102px;}',
        '.xlib-ui-glayer-body, .xlib-ui-glayer-inner{margin:0; padding:0;font:12px/1.231 Tahoma,Helvetica,Arial,Simsun,sans-serif;}',
        '.xlib-ui-glayer-remain{margin:0; padding:0;height:24px; line-height:24px; text-align:center; overflow:hidden;}'
    ];
    XLib.DOM.ready(function(cssTexts){
        XLib.CSS.dynamicStyle(cssTexts, "xlib-ui-glayer");
    }, [cssTexts]);
}

/**
 * 原型扩展
 */
XLib.UI.GLayer.prototype = {
    /**
     * 设置配置参数
     * @param Object cfg
     *         - int zIndex z轴
     *         - String id 唯一标识
     *         - int width 宽度
     *         - int height 高度
     *         - String title 标题
     *         - Boolean closer 是否显示关闭按钮
     *         - String content 内容
     *         - Boolean frame 是否为frame, 如果为frame,content为frame的URL
     *         - Boolean drag 是否允许拖动
     *         - int delay 自动延时隐藏（秒）
     *         - Object overflow {x, y} 内容溢出处理
     */
    setConfig : function(cfg)
    {
        cfg = cfg || {};
        this.config = {
            zIndex : 3000,   //z轴
            id : "glayer_0", //ID
            width : 550, //宽度
            height : 0,  //高度 0:自动
            title : null, //为null时，不显示
            closer : true, //显否显示关闭按钮
            content : null, //内容
            frame : false, //是否为frame, 如果为frame,content为frame的URL
            drag : true, //是否允许拖动
            delay : 0, //自动延时隐藏（秒）
            overflow : {x:'hidden', y:'auto'} //内容溢出处理
        };
        for(var key in cfg)
        {
            if(cfg.hasOwnProperty(key))
            {
                this.config[key] = cfg[key];
            }
        }
    },
    /**
     * 获取配置参数
     * @return Object 配置参数对象
     */
    getConfig : function()
    {
        return this.config;
    },
    /**
     * 设置单个参数值
     * @param String key 参数名
     * @param * value 参数值
     */
    setConfigValue : function(key, value)
    {
        this.config[key] = value;
    },
    /**
     * 获取单个参数值
     * @param String key 参数名
     * @return * value 参数值
     */
    getConfigValue : function (key)
    {
        if(this.config.hasOwnProperty(key))
        {
            return this.config[key];
        }
        else
        {
            return null;
        }
    },
    /**
     * 创建遮罩层
     */
    createMask : function()
    {
        var id = this.PREFIX + this.getConfigValue("id") + "_mask";
        var p = this.getMask();
        if(null == p)
        {
            p = XLib.DOM.$C('div');
            p.setAttribute("id", id);
            p.innerHTML = '<iframe frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" scrolling="no" src="' + (XLib.UI.SECURE_PAGE) + '"></iframe>';
            XLib.CSS.setClass(p, 'xlib-ui-glayer-full');
            XLib.DOM.$A(p);
        }
    },
    /**
     * 创建层面板
     */
    createPanel : function(){
        var id = this.PREFIX + this.getConfigValue("id") + "_panel";
        var p = this.getPanel();
        var html = '<div class="xlib-ui-glayer-mask"><!-- mask --></div><div class="xlib-ui-glayer-content">';

        if(null != this.getConfigValue("title"))
        {
            html += '<h2 class="xlib-ui-glayer-title"><!-- title --></h2>';
        }

        html += '<div class="xlib-ui-glayer-body"><div class="xlib-ui-glayer-inner"></div>';

        if(true === this.getConfigValue("closer"))
        {
            html += '<a class="xlib-ui-glayer-closer" href="###" title="关闭"><!-- 关闭 --></a>';
        }

        if(this.getConfigValue("delay") > 0)
        {
            html += '<div class="xlib-ui-glayer-remain">' + this.getConfigValue("delay") + '&nbsp;秒后自动关闭...</div>';
        }
        html += '</div></div>';

        if(null == p)
        {
            p = XLib.DOM.$C('div');
            p.setAttribute("id", id);
            XLib.CSS.setClass(p, 'xlib-ui-glayer-panel');
            XLib.DOM.$A(p);
        }
        p.innerHTML = html;
        this.hide();
        this.setTitle(this.getConfigValue("title"));
        this.setContent(this.getConfigValue("content"), this.getConfigValue("frame"));
        this.setCloser(this.getConfigValue("closer"));
        this.setSize(this.getConfigValue("width"), this.getConfigValue("height"));
    },
    /**
     * 获取mask
     * @return HTMLNode mask
     */
    getMask : function()
    {
        var id = this.PREFIX + this.getConfigValue("id") + "_mask";
        return XLib.DOM.$E(id);
    },
    /**
     * 获取panel
     * @return HTMLNode panel 面板
     */
    getPanel : function()
    {
        var id = this.PREFIX + this.getConfigValue("id") + "_panel";
        return XLib.DOM.$E(id);
    },
    /**
     * 获取节点
     * @param String className css类名
     * @param HTMLNode n 匹配的HTML节点，找不到匹配时返回null
     */
    getNode : function(className)
    {
        var p = this.getPanel();
        var n = null;
        if(null != p)
        {
            n = XLib.DOM.getElementsByClassName(className, p, false);
            if(n.length > 0)
            {
                n = n[0];
            }
        }
        return n;
    },
    /**
     * 获取遮罩层
     * @return HTMLNode node
     */
    getMaskNode : function()
    {
        return this.getNode("xlib-ui-glayer-mask");
    },
    /**
     * 获取Content节点
     * @return HTMLNode node
     */
    getContentNode : function()
    {
        return this.getNode("xlib-ui-glayer-content");
    },
    /**
     * 获取标题节点
     * @return HTMLNode node
     */
    getTitleNode : function()
    {
        return this.getNode("xlib-ui-glayer-title");
    },
    /**
     * 获取body节点
     * @return HTMLNode node
     */
    getBodyNode : function()
    {
        return this.getNode("xlib-ui-glayer-body");
    },
    /**
     * 获取内容节点
     * @return HTMLNode node
     */
    getInnerNode : function()
    {
        return this.getNode("xlib-ui-glayer-inner");
    },
    /**
     * 获取内容iframe节点
     * @return HTMLNode node
     */
    getIframeContentNode : function()
    {
        var id = this.PREFIX + this.getConfigValue("id") + "_iframe_content";
        return XLib.DOM.$E(id);
    },
    /**
     * 获取关闭按钮节点
     * @return HTMLNode node
     */
    getCloserNode : function()
    {
        return this.getNode("xlib-ui-glayer-closer");
    },
    /**
     * 获取倒计时节点
     * @return HTMLNode node
     */
    getRemainNode : function()
    {
        return this.getNode("xlib-ui-glayer-remain");
    },
    /**
     * 设置标题
     * @param String str 标题
     */
    setTitle : function(str)
    {
        var n = this.getTitleNode();
        if(null != n)
        {
            n.innerHTML = str;
        }
    },
    /**
     * 设置内容
     * @param String str 内容
     * @param Boolean frame 是否为框架
     */
    setContent : function(str, frame)
    {
        var n = this.getInnerNode();
        if(null != n)
        {
            if(true === frame)
            {
                var id = this.PREFIX + this.getConfigValue("id") + "_iframe_content";
                n.innerHTML = '<iframe id="' + id + '" width="100%" height="100%" frameborder="0" vspace="0" hspace="0" marginwidth="0" marginheight="0" src="' + (XLib.UI.SECURE_PAGE) + '"></iframe>';
                var ifrContent = this.getIframeContentNode();
                try
                {
                    var win = ifrContent.contentWindow || ifrContent;
                    win.document.location.replace(str);
                }
                catch(e)
                {
                    ifrContent.src = str;
                }
            }
            else
            {
                n.innerHTML = str;
            }
        }
    },
    /**
     * 设置倒计时
     * @param int time 时间
     */
    setRemain : function(time)
    {
        if(time <= 0)
        {
            this.hide();
            return time;
        }
        var n = this.getRemainNode();
        var _this = this;
        if(null != n)
        {
            n.innerHTML = time + '&nbsp;秒后自动关闭...';
        }
        setTimeout(function(){
            _this.setRemain(--time);
        }, 1000);
    },
    /**
     * 设置闭按钮
     */
    setCloser : function()
    {
        var n = this.getCloserNode();
        if(null != n)
        {
            var _this = this;
            XLib.Event.addEventListener(n, "click", function(_GLayer){
                XLib.Event.preventDefault();
                XLib.Event.stopPropagation();
                _GLayer.hide();
            }, [this], false);
        }
    },
    /**
     * 设置位置
     */
    setPosition : function()
    {
        var doc = XLib.BOM.getDocumentSize();
        var viewport = XLib.BOM.getViewportSize();
        var scroll = XLib.BOM.getScrollPosition();

        var p = this.getPanel();
        var w = this.getConfigValue("width");
        var h = this.getConfigValue("height");

        w = Math.max(w, p.offsetWidth);
        h = Math.max(h, p.offsetHeight);

        var _pl = Math.max(Math.floor(viewport.width / 2 - w / 2), 0) + scroll.left;
        var _pt = Math.max(Math.floor(viewport.height / 2 - h / 2), 0) + scroll.top;

        p.style.top = _pt + "px";
        p.style.left = _pl + "px";
    },
    /**
     * 设置大小
     * @param int width 宽
     * @param int height 高
     */
    setSize : function(width, height)
    {
        var doc = XLib.BOM.getDocumentSize();
        var viewport = XLib.BOM.getViewportSize();
        var scroll = XLib.BOM.getScrollPosition();

        var p = this.getPanel();
        var c = this.getContentNode();
        var k = this.getMaskNode();
        var t = this.getInnerNode();
        var m = this.getMask();
        var i = XLib.DOM.$T("iframe", m)[0];
        var isAutoWidth = (width <= 0);
        var isAutoHeight = (height <= 0);

        var dw = Math.max(doc.width, viewport.width) + scroll.left;
        var dh = Math.max(doc.height, viewport.height) + scroll.top;

        var offset = this.offset * 2;

        m.style.width = dw + "px";
        m.style.height = dh + "px";
        i.style.width = dw + "px";
        i.style.height = dh + "px";

        if(isAutoWidth)
        {
            width = t.offsetWidth + offset;
        }
        p.style.width = width + "px";
        k.style.width = width + "px";
        t.style.width = (width - offset) + "px";
        c.style.width = (width - offset) + "px";


        if(isAutoHeight)
        {
            height = t.offsetHeight;
            height = (this.getConfigValue("delay") > 0 ? (height + offset + 32 + 24) : (height + offset + 32));

        }
        p.style.height = height + "px";
        k.style.height = (height + offset) + "px";
        t.style.height = (this.getConfigValue("delay") > 0 ? (height - 24) : height) + "px";
        if(null !== this.getConfigValue("title"))
        {
            t.style.height = (this.getConfigValue("delay") > 0 ? (height - 32 - 24) : (height - 32)) + "px";
        }
        c.style.height = height + "px";
        t.style.overflowX = this.getConfigValue("overflow")["x"];
        t.style.overflowY = this.getConfigValue("overflow")["y"];
    },
    /**
     * 设置z轴
     * @param int zIndex
     */
    setZIndex : function(zIndex)
    {
        var p = this.getPanel();
        var m = this.getMask();
        p.style.zIndex = zIndex;
        m.style.zIndex = zIndex - 1;
    },
    /**
     * 重置
     * @param GLayer glayer
     */
    reset : function(glayer)
    {
        glayer.setPosition();
    },
    /**
     * 显示
     * @param Boolean isShow 是否显示
     */
    display : function(isShow)
    {
        var p = this.getPanel();
        var m = this.getMask();
        p.style.left = "-10000px";
        p.style.top = "-10000px";
        if(isShow)
        {
            m.style.display = "block";
            p.style.visibility = "visible";
            this.setPosition();
        }
        else
        {
            m.style.display = "none";
            p.style.visibility = "hidden";
        }
    },
    /**
     * 显示层
     * @param Object cfg
     *         - int zIndex z轴
     *         - String id 唯一标识
     *         - int width 宽度
     *         - int height 高度
     *         - String title 标题
     *         - Boolean closer 是否显示关闭按钮
     *         - String content 内容
     *         - Boolean frame 是否为frame, 如果为frame,content为frame的URL
     *         - Boolean drag 是否允许拖动
     *         - int delay 自动延时隐藏（秒）
     *         - Object overflow {x, y} 内容溢出处理
     */
    show : function(cfg)
    {
        this.setConfig(cfg);
        this.createMask();
        this.createPanel();
        this.setZIndex(this.getConfigValue("zIndex"));
        this.display(true);
        if(this.getConfigValue("delay") > 0)
        {
            this.setRemain(this.getConfigValue("delay"));
        }
        if(false === this.isBindEvent)
        {
            XLib.Event.addEventListener(window, "resize", this.reset, [this], false);
            XLib.Event.addEventListener(window, "scroll", this.reset, [this], true);
            if(true === this.getConfigValue("drag") && null !== this.getConfigValue("title"))
            {
                XLib.Event.addEventListener(this.getTitleNode(), "mousedown", function(glayer){
                    XLib.Drag.drag([glayer.getPanel()]);
                }, [this], false);
                this.getTitleNode().style.cursor = "move";
            }
        }
    },
    /**
     * 隐藏层
     */
    hide : function()
    {
        this.display(false);
    }
};